<template>
  <basic-container>
    <div class="margin-box">
      <data-list
        :pageInfo="pager"
        placeholder="请输入使用单位"
        :listData="tableData"
        searchName="keyword"
        :menuList="['add',{test: '打印'},{export:'导出'}]"
        openSelection
        :filterList="filterList"
        @menu-click="handleMenuClick"
      >
        <el-table :data="tableData" @selection-change="$event => (multipleSelection = $event)" align="center">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="授权号" show-overflow-tooltip>
            <template slot-scope="scope">
              <a @click="toDetail(scope)" target="_blank" class="buttonText" style="cursor: pointer">
                <span style="color: #1c71fb">{{scope.row.authorizationNumber}}</span>
              </a>
            </template>
          </el-table-column>
          <el-table-column label="使用单位" prop="unitName"></el-table-column>
          <el-table-column label="授权日期" prop="authorizationTime"></el-table-column>
          <el-table-column label="授权状态" prop="authorizationStatus"></el-table-column>
          <el-table-column label="收回状态" prop="recoveryStatusStr"></el-table-column>
          <el-table-column label="操作" min-width="110px;">
            <template slot-scope="scope">
              <el-button type="text" @click="toEditData(scope)" v-if="deleteUseCardBut && scope.row.recoveryStatus == 0">编辑</el-button>
              <el-button type="text" @click="toChange(scope)" v-if="deleteUseCardBut && scope.row.recoveryStatus == 0">变更</el-button>
              <el-button type="text" @click="deleteRow(scope)" v-if="updateUseCardBut">删除</el-button>
              <el-button type="text" @click="toWindowApplyList(scope)" v-if="deleteUseCardBut && scope.row.recoveryStatus == 0">物业</el-button>
              <el-button type="text" @click="doRecovery(scope)" v-if="scope.row.recoveryStatus == 0">回收</el-button>
              <el-button type="text" @click="doPrintingOne(scope)" v-if="scope.row.recoveryStatus == 0">打印</el-button>
            </template>
          </el-table-column>
        </el-table>
      </data-list>
      <property-view ref="propertyView"></property-view>
      <v-dialog title="使用证打印" :show.sync="dialogVisible" :closeOnClickModal="false" @beforeClose="beforeClose" width="1200px">
        <el-divider></el-divider>

        <section ref="printTemplate" id="printTemplate">
          <h2 style="text-align: center; font-size: 24px; font-weight: 400;">福田区政府物业授权使用证</h2>
          <div class="template-head">
            <div class="template-head-font">使用单位: {{unitName}}</div>
            <span class="head-time">使用证号：{{authorizationNumber}}</span>
          </div>
          <div class="table-div">
            <!-- <el-form  :rules="rules" status-icon  :model="printData"  ref="form"> -->
            <table class="table table-bordered">
              <thead class="thead-light">
                <tr>
                  <th>序号</th>
                  <th class="propertyName">物业名称</th>
                  <th>物业地址</th>
                  <th>建筑面积(m²)</th>
                  <th class="authorizationUse">授权用途</th>
                  <th>授权起止日期</th>
                  <th>年审</th>
                  <th>备注</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in useCardPropertyList" :key="item.cardPropertyId">
                  <td>{{index+1}}</td>
                  <td>{{item.propertyName}}</td>
                  <td>{{item.propertyAddress}}</td>
                  <td>{{item.addressArea}}</td>
                  <td>
                    <div v-for="(e,i) in authorizationUseList" :key="i">
                      <span v-if="e.value ==item.authorizationUse">{{e.label }}</span>
                    </div>
                  </td>
                  <td>{{ item.createTime }}-{{item.endTime}}</td>
                  <td></td>
                  <td>{{item.remarks}}</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="2" align="center">合计</td>
                  <td>&nbsp;</td>
                  <td>{{sumArea}}</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td></td>
                  <td>&nbsp;</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </section>
        <div slot="foot">
          <el-button type="primary" size="small" @click="dialogVisible = false" style="width: 80px">关闭</el-button>
          <el-button type="primary" v-throttle="[submit]" size="small" class="printButton" style="width: 80px">打印</el-button>
        </div>
      </v-dialog>
    </div>
  </basic-container>
</template>

<script src="./use-card-list.js"></script>
<style scoped lang="scss">
@import "./use-card-list";
</style>

